import React, { useState } from 'react'

export default function App() {


    const [obj, setObj] = useState({
        x: 0,
        y: 0,
        w: 100,
        h: 100
    })


    function mouseMove(event) {
        // console.log(event.clientX, event.clientY);

        // 鼠标移动的时候会导致 w 和 h 数据丢失了
        // 因为 {x: 1, y: y} 会替代掉原来的 obj，新的对象中没有 w 和 h 所有会数据丢失
        // setObj({
        //     x: event.clientX,
        //     y: event.clientY
        // })


        // 如果有很多很多属性的时候，这么写太复杂了
        // setObj({
        //     x: event.clientX,
        //     y: event.clientY,
        //     w: 100,
        //     h: 100
        // })

        // 该方法是可行的，但是我们最好将两个内容分开定义
        setObj({
            ...obj,
            x: event.clientX,
            y: event.clientY,
        })


    }


    return (
        <div style={{ width: '100vw', height: '100vh' }} onMouseMove={mouseMove}>
            <h1>
                宽：{obj.w} ------- 高：{obj.h},
                x：{obj.x} ------- y：{obj.y}
            </h1>


        </div>
    )
}
